<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta charset="UTF-8">
		<title>意见反馈</title>
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/suggest.css"/>
	</head>
	<body>
		<div id="suggest">
			<h3>意见反馈</h3>
			<div class="suggest">
				<div class="inputtext">
					<textarea type="" id="" v-model='textare'  class="sug-textarea" placeholder="反馈内容"/></textarea>
					<span class="textlength" v-show="qwe">还可以输入 {{num}} 字</span>
					<span class="textlength" v-show="asd" style="color: red;">超过限制 {{num}} 字</span>
				</div>
				<div class="sug-phonenumber">
					<span>联系电话</span><input type="tel" name="" id="" v-model="telphone" placeholder="(选填)"/>
				</div>
				<div class="sug-footer">
					<div class="button" @click="submitPost">提交</div>
				</div>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
		<script src="js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			new Vue({
				el:'#suggest',
				data:{
					textare:'',
					telphone:'',
					num:200,
					qwe:true,
					asd:false,
					name:'',
					number:''
				},
				http: {
				   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
				},
				watch:{
						textare(curVal,oldVue){
							console.log(curVal,oldVue)
							if(curVal.length <= 200){
							this.num = 200-curVal.length
								this.qwe=true
								this.asd=false
							}else if(curVal.length > 200){
							this.num = -(200-curVal.length)
								this.qwe=false
								this.asd=true
							}
						}
				},
				created:function(){
					this.name = localStorage.getItem("name");
					this.number =  localStorage.getItem("number");
				},
				methods:{
					submitPost:function(){
						var self = this;
						var re = /^1\d{10}$/;
						console.log(self.name);
						if(self.name  == null || self.number == null){
							self.$messagebox.alert("您还没有身份认证！").then(function(){
								location.href = "authentication.html";
//								window.open("authentication.html")
							});
						}else{
							
							if(this.textare.length < 5 || this.textare.length > 200){
							this.$toast( '输入文字必须在5-200之间');
						}else{
							if(re.test(this.telphone) || this.telphone == ''){
								this.$toast( '发送HTTP');
								var url = server_url+"a/zhtj/yjfk/frontSave?nr="+ this.textare +"&lxdh="+this.telphone
								this.$http.post(url).then(function(res){
											console.log(res)
//											var data = JSON.stringify(res);
											console.log(res.body.status)
											if(res.body.status == 0){
												var msg = res.body.msg;
												console.log(msg)
			//									this.$messagebox( '提示','提交成功');
												this.$messagebox.alert(msg).then(function(){
												self.textare = ''
												self.telphone = ''
												});
											}
										},function(res){
										
										})
							}else {
								this.$toast( '手机号码输入有误');
							}
						}
							
						}
						
					}
				}
			})
		</script>
	</body>
</html>
